<template>
<div>
<el-container>
    <el-container>
    <el-aside width="300px" style="font-size: 24px;margin-left:50px">
        <el-menu
      default-active="/student/page"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :router="true"
      style="margin-left:20px; margin-top: 20px">

            <el-menu-item index="/student/page">
                <i class="el-icon-user"></i>
                <span slot="title">主页</span>
            </el-menu-item>

            <el-menu-item index="/class/page">
                <i class="el-icon-more"></i>
                <span slot="title">个人信息</span>
            </el-menu-item>
                <!-- index="/class/select" -->
            <el-menu-item >
                <i class="el-icon-more"></i>
                <span slot="title">课程查询</span>
            </el-menu-item>
        </el-menu>
    </el-aside>
            <el-main>
            <el-container>
             <el-aside width="800px">
            <!-- 走马灯 -->
            <el-carousel height="255px">
            <el-carousel-item v-for="item in 4" :key="item">
                <h3 class="small">{{ item }}</h3>
            </el-carousel-item>
            </el-carousel>
             </el-aside>
             <el-divider direction="vertical"></el-divider>
             <el-main>
                 <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar><br>
                 <span>{{nickname}}</span><br><br>
                 <el-link :underline="false">课程1</el-link><br>
                 <el-link :underline="false">课程2</el-link><br>
                 <el-link :underline="false">课程3</el-link><br>
             </el-main>
            </el-container>
            </el-main>
    </el-container>
   </el-container>
            <!-- 卡片 ,作者：张家豪-->
            <el-divider content-position="left"></el-divider>
               <div style="text-align:left"> <span >我的课程</span></div>
               <div v-for="(course, index) in card" :key="course.id" :offset="index > 0 ? 0 : 0">  

                    <el-col  :span="8" v-for="(courses,indexs) in course" :key="courses.id" :offset="indexs> 0 ? 0 : 0" style="width:300px;margin-top:10px">
                            <el-card  style="margin:3px" :body-style="{ padding: '0px' }" >
                                <img :src="courses.avatarUrl" class="image">
                                <div style="padding: 1px;">
                                <span>课程名称：{{courses.courseName}}</span><br>
                                <span>类型：{{courses.courseType}}</span>
                                <div class="bottom clearfix">
                                <el-button type="text" class="button" style="margin-left:200px" @click="check(courses.id)">查看详情</el-button>
                                </div>
                                </div>
                            </el-card>
                    </el-col>
                   
               </div>  
               
</div>
</template>

<script>

import {getCookie} from '@/libs/cookie'
import {selectMyCourse} from '@/api/modules/coursemanager'
import {setCookie} from '@/libs/cookie'

export default {
  data() {
    return {
      currentDate: new Date(),
        card:[],
        coursetype:[],
        courseID:{
            id:''
        },
        address:{
            index:''
        },
        nickname:'',
        user:{}
    };
  },
  mounted(){
        let user = JSON.parse(getCookie("user") || '{}');
          this.nickname = user.nickname
          this.user = user
      this.getCourse()

  },
  methods:{
     check(id){
         this.courseID.id = id
         console.log(id)
         setCookie("courseID", JSON.stringify(this.courseID.id), {
                         expires: 7
                     })
       this.$router.push("/student/class_check");
       },
      getCourse(filter){
          filter = {
              ...filter,
              ...this.user
          }
          selectMyCourse(filter).then(res =>{
              this.card = res.data.myCourse
              console.log(this.card)
          })
      },
    handleOpen(key, keyPath) {
        //console.log(key, keyPath);
      },
    handleClose(key, keyPath) {
       // console.log(key, keyPath);
      },
    handleSelect(key, keyPath) {
       // console.log(key, keyPath);
      }
  },

}
</script>

<style scoped>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}
  
.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}
  
.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
  .image {
    width: 300px;
    height: 150px;
    min-height: 100%;

  }

</style>